pub mod event_t {
    use web_sys::HtmlInputElement;
    use yew::{
        events::Event,
        html,
        Component, Context, Html, TargetCast
    };

    pub struct TargetCastEventComp;

    pub enum Msg {
        InputValue(String),
    }

    impl Component for TargetCastEventComp {
        type Message = Msg;
        type Properties = ();
        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }
        fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
            if let Msg::InputValue(value) = msg {
                weblog::console_log!(value);
                true
            } else {
                false
            }
        }
        // using batch_callback when want to conditionally return a value from callback
        fn view(&self, ctx: &Context<Self>) -> Html {
            let link = ctx.link();
            let on_cautious_change = link.batch_callback(|e: Event| {
                // same as JsCast::dyn_into
                // --------
                let input = e.target_dyn_into::<HtmlInputElement>();
                // --------
                input.map(|input| Msg::InputValue(input.value()))
            });
            let on_dangerous_change = link.callback(|e: Event| {
                // same as JsCast::uncheck_into
                // target must be a HtmlInputElement
                // --------
                Msg::InputValue(e.target_unchecked_into::<HtmlInputElement>().value())
                // --------
            });
            html!{
                <div>
                    <label for="cautious-input">
                        {"My cautious-input:"}
                        <input 
                            type="text"
                            id="cautious-input"
                            onchange={on_cautious_change}
                        />
                    </label>
                    <br/>
                    <label for="dangerous-input">
                        {"My dangerous-input:"}
                        <input 
                            type="text"
                            id="dangerous-input"
                            onchange={on_dangerous_change}
                        />
                    </label>
                </div>
            }
        }
    }
}